<template>
  <div>
    <van-goods-action style="z-index:50">
        <van-goods-action-icon icon="chat-o" text="客服"   @click="aa"/>
        <van-goods-action-icon :icon="star?'star':'star-o'" @click="star = !star" text="已收藏" :color="star?'#ff5000':''"/>
        <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/home/shoplist')" :badge="Object.keys(list).length"/>
        <van-goods-action-button type="warning" text="加入购物车"  @click="$emit('show_now' , new Date().getTime())" />
        <van-goods-action-button type="danger" text="立即购买" @click="$emit('show_now' , new Date().getTime())" />
    </van-goods-action>
  </div>
</template>

<script>
import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
import { mapState , mapGetters } from 'vuex'

Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
    data(){
        return {
            star:false,
            shop_l:0
        }
    },
    computed:{
      ...mapState('products' , {
          list: 'list',
      }), 
      ...mapGetters('products' , {
          returnList:'returnList'
      }), 

    },
    // watch:{
    //   list:{
    //      deep: true,
    //      handler(val){
    //       this.shop_l = Object.keys(this.list).length
    //       console.log(this.shop_l)
    //       alert()
    //      }
    //   },    
    // },
    methods:{
      aa(){
        console.log(this.list)
        console.log(Object.keys(this.list).length)

      }
    }
};
</script>

<style>
</style>